//封装渲染页面的函数
function bindHtml(arr) {
    let html = ""
    arr.forEach(item => {
        // console.log(item.productId);
        html += ` 
    <ul id='info' productid=${item.productId}>
        <li>
            <a>
                <div class="content-img">
                ${item.productImg2}
                </div>
                <div class="content-word">
                    ${item.productName}
                    <div class="word-bottom">
                        <div class="bottom-left">
                            ${item.productFrom} | ${item.productTime}
                        </div>
                        <svg class="icon">
                            <use xlink:href="#icon-tubiao-"></use>
                        </svg>
                        <div class="bottom-right">
                            ${item.productComCount}
                        </div>
                    </div>
                </div>
            </a>
        </li>
    </ul>`
    })
    //一定要return 否则页面内容undefined
    return html;
}

//点击按钮实现页面切换
var prev = document.querySelector(".prev")
var next = document.querySelector(".next")
var select = document.querySelector("select")
var page = 0;

//封装请求数据 渲染页面的函数
function rander(page) {
    ajax({
        url: 'http://chst.vip:1234/api/getmoneyctrl?pageid=' + page
    }).then(res => {
        let arr = res.result
        let html = bindHtml(arr)
        content.innerHTML = html;
        [...content.children].forEach(ul => {
            ul.onclick = function () {
                let productid = this.getAttribute('productid')
                location.href = `indexXiang.html?productid=${productid}`
            }
        })
    })
}

//第一次渲染页面
rander()

//实现点击select选项相应页面数据渲染
select.onchange = function () {
    console.log(this.selectedIndex);
    rander(this.selectedIndex)
}

//一开始就禁用上一页按钮
if (select.selectedIndex === 0) {
    prev.disabled = true
}

//点击上一页按钮
prev.onclick = function () {
    select.selectedIndex--;
    console.log(select.selectedIndex);
    //判断上一页按钮禁用和下一页按钮解禁
    if (select.selectedIndex === 0) {
        prev.disabled = true
    } else if (select.selectedIndex !== 13) {
        next.disabled = false
    }
    //渲染上一页页面
    rander(select.selectedIndex)
}

//点击下一页按钮
next.onclick = function () {
    select.selectedIndex++;
    console.log(select.selectedIndex);

    //判断下一页按钮禁用和上一页按钮解禁
    if (select.selectedIndex === 13) {
        next.disabled = true
    } else if (select.selectedIndex !== 0) {
        prev.disabled = false
    }
    //渲染下一页页面
    rander(select.selectedIndex)
}












